<template>
	<div style="padding:0px;">
		<el-form  v-if="!dialogSendData.isAdd" :model="dialogForm"  ref="dialogForm" :rules="rules" :label-width="formLabelWidth">
			<el-tabs v-model="activeName" type="card" >
				<el-tab-pane label="图片信息" name="first">
			    	<el-form-item label="上游购销合同" >
				      <qiniu  :qiniuImage="qiniuImage"  :packJson="packJson" :id="qiniuImage.id" :canDelete="dialogSendData.isAdd"></qiniu>
				    </el-form-item>
				    <el-form-item label="定金凭证" >
				      <qiniu  :qiniuImage="qiniuImage"  :packJson="packJson" :id="qiniuImage.id" :canDelete="dialogSendData.isAdd"></qiniu>
				    </el-form-item>
				    <el-form-item label="供应商收款账号" >
				      <qiniu  :qiniuImage="qiniuImage"  :packJson="packJson" :id="qiniuImage.id" :canDelete="dialogSendData.isAdd"></qiniu>
				    </el-form-item>
				    <el-form-item label="保证金凭证" >
				      <qiniu  :qiniuImage="qiniuImage"  :packJson="packJson" :id="qiniuImage.id" :canDelete="dialogSendData.isAdd"></qiniu>
				    </el-form-item>
				    <el-form-item label="车辆资料打款证明照片" >
				      <qiniu  :qiniuImage="qiniuImage"  :packJson="packJson" :id="qiniuImage.id" :canDelete="dialogSendData.isAdd"></qiniu>
				    </el-form-item>
				    <el-form-item label="车辆验车照片" >
				      <qiniu  :qiniuImage="qiniuImage"  :packJson="packJson" :id="qiniuImage.id" :canDelete="dialogSendData.isAdd"></qiniu>
				    </el-form-item>
				    <el-form-item label="新车架号照片" >
				      <qiniu  :qiniuImage="qiniuImage"  :packJson="packJson" :id="qiniuImage.id" :canDelete="dialogSendData.isAdd"></qiniu>
				    </el-form-item>
				    <el-form-item label="付款通知书" >
				      <qiniu  :qiniuImage="qiniuImage"  :packJson="packJson" :id="qiniuImage.id" :canDelete="dialogSendData.isAdd"></qiniu>
				    </el-form-item>
				    <el-form-item label="提车地址及联系人" >
				      <qiniu  :qiniuImage="qiniuImage"  :packJson="packJson" :id="qiniuImage.id" :canDelete="dialogSendData.isAdd"></qiniu>
				    </el-form-item>
				   
			    </el-tab-pane>
			    <el-tab-pane label="车辆信息" name="second">
			    	
				    <el-form-item label="汽车车型" >
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="指导价/配置" >
				      <el-input  type="textarea" :rows=3 v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="汽车数量"  class="half">
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="汽车颜色"  class="half">
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    
				    <el-form-item label="购车总价格"  class="half">
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="垫资金额"  class="half">
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="定金金额"  class="half">
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="保证金金额"  class="half">
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    
				    <el-form-item label="借款时长"  class="half">
				      <el-input  v-model="dialogForm.resource" auto-complete="off" disabled ></el-input>
				    </el-form-item>

			    </el-tab-pane>
			    <el-tab-pane label="上游供应商信息" name="three">
			    	<el-form-item label="合同上游名称" >
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				  	
				    <el-form-item label="提车地址(起运地)" >
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				  	<el-form-item label="提车联系人" >
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="联系人手机号" >
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				  	<el-form-item label="收款账号" >
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="收款帐户名" >
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="开户行名称" >
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <!-- <el-form-item label="备用收款信息" >
				      <el-button  type="primary" @click="activeShow=!activeShow">{{activeShow?"收 起":"展 开"}}</el-button>
				    </el-form-item>
				    <div v-if="activeShow" >
				    	<el-form-item label="备用收款账号" >
				    					      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    					    </el-form-item>
				    					    <el-form-item label="备用收款人姓名" >
				    					      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    					    </el-form-item>
				    					    <el-form-item label="备用开户行名称" >
				    					      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    					    </el-form-item>
				    </div> -->
				  	<el-form-item label="打款备注" >
				      <el-input type="textarea" :rows=3 v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="资料更改记录" >
				      <el-input type="textarea" :rows=3 v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
			    </el-tab-pane>
			   
			    <el-tab-pane label="物流信息" name="fourth">
				    
				    <el-form-item label="物流公司" >
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="验车司机信息" >
				      <el-input  type="textarea" :rows=3 v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				  	<el-form-item label="目的地"  >
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="物流费"  >
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="放空费"  >
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="原车架号"  >
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="新车架号"  >
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    
			    </el-tab-pane>
			    <el-tab-pane label="资金方信息" name="five">
			    	<el-form-item label="资金方" >
				      <el-input  v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="SPV" >
				      <el-input  type="textarea" :rows=3 v-model="dialogForm.qczjg" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="银行卡" >
					    <el-select v-model="dialogForm.region" placeholder="请选择银行卡">
					      <el-option label="银行卡1" value="shanghai">银行卡1</el-option>
					      <el-option label="银行卡2" value="beijing">银行卡2</el-option>
					    </el-select>
				    </el-form-item>
				    <el-form-item label="合同信息" >
				      <el-transfer v-model="contractValue" :data="contractData" :titles="contractTitles" @change="contractChange"></el-transfer>
				    </el-form-item>
			    </el-tab-pane>
			</el-tabs>
			
		</el-form>
		<el-form v-else :model="dialogForm"  ref="dialogForm" :rules="rules">
			<el-card class="box-card" style="margin-top:15px;">
			  <div slot="header" class="clearfix">
			    <span style="line-height: 30px;">原始信息</span>
			  </div>
			  <div  class="text item">
				  	
				    <el-form-item label="订单号" >
				      <el-input  v-model="dialogForm.qcsl" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="经销商名称" >
				      <el-input  v-model="dialogForm.qcsl" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="上游供应商" >
				      <el-input  v-model="dialogForm.qcsl" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="收款账号" >
				      <el-input  v-model="dialogForm.qcsl" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="收款账户名" >
				      <el-input  v-model="dialogForm.qcsl" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="开户行" >
				      <el-input  v-model="dialogForm.qcsl" auto-complete="off" disabled></el-input>
				    </el-form-item>
				</div>
			</el-card>
			<el-card class="box-card" style="margin-top:15px;">
			  <div slot="header" class="clearfix">
			    <span style="line-height: 30px;">变更信息</span>
			  </div>
			  <div  class="text item">
				  	
				    <el-form-item label="新收款账号" >
				      <el-input  v-model="dialogForm.qcsl" auto-complete="off" ></el-input>
				    </el-form-item>
				    <el-form-item label="新收款账户名" >
				      <el-input  v-model="dialogForm.qcsl" auto-complete="off" ></el-input>
				    </el-form-item>
				    <el-form-item label="新开户行" >
				      <el-input  v-model="dialogForm.qcsl" auto-complete="off" ></el-input>
				    </el-form-item>
				    <el-form-item label="变更备注" >
				      <el-input type="textarea" :rows=3 v-model="dialogForm.qcsl" auto-complete="off" ></el-input>
				    </el-form-item>
				    
				</div>
			</el-card>
		</el-form>
		<div style="text-align:right;margin-top:15px;">
			 <el-button @click="returnBack">返 回</el-button>
			 <el-button  v-if="dialogSendData.isAdd" type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
		</div>
	</div>
</template>
<script>
    import qiniu from '@/views/qiniu/upload'
    import agentHttp from '@/utils/agentHttp.js'
	export default{
		components:{qiniu},
		created(){		
			if(this.dialogSendData.id!==""){
	      		//修改
	      		this.selectData(); 
	      	}
        },
        
        updated(){
        },
		props:['dialogSendData','tableData'],
		data(){
			const generateData = _ => {
	            const data = [];
		        for (let i = 1; i <= 4; i++) {
		          data.push({
		            key: i,
		            label: `永利宝借款${ i }`,
		           
		          });
		        }
		        return data;
		    };
			return{
				activeName:"first",

		        contractData: generateData(),
                contractValue: [],
                contractTitles:['可选合同模板','已选合同模板'],
				formLabelWidth:'170px',
				//弹窗或者查看页面信息
		         dialogForm:{
		          imagUrl:[],   //七牛图片地址
		          activityTheme:"",
		          linkUrl:""
		         
		        },
		        //验证规则
		        rules: {
		        },
                //七牛图片上传
		        qiniuImage:{
		        	id:"qiniuImage", //图片预览的id   
		        	image_uri:[]    //图片上传的列表  只含有url地址
		        },
		        packJson:{
					maxLength:3,   //最大图片数量
					accept:"",//image/gif,image/jpeg,image/jpg,image/png如果是这些，可以不传此参数
					size:4    //图片大小  单位兆
				}
			}
		},methods:{
			contractChange(value, direction, movedKeys){//右边的值·····方向字符串······移动的值
		    	console.log(value+"````````````"+direction+"```````````"+movedKeys)
		    },
			returnBack(){
				this.dialogSendData.dialogFormVisible=false;
			},
			submitConfirmForm(formName){
                this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	if(this.dialogSendData.id===""){
		          		//添加
		          	    this.addData();
		          	}else{
		          		//修改
		          		this.editData();
		          	}
		          	setTimeout(()=>{
	            		this.dialogSendData.dialogFormVisible=false;
	            	},500)
		          } else {
		            this.$nextTick(()=>{
		          		this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText||"提交失败");
		                return false;
		          	})
		          }
		        });
			},
		    addData(){
		        this.dialogForm.imagUrl=this.qiniuImage.image_uri.join(",")
		        agentHttp.postJson('adminApi/admin/carousel/post_validated',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData', null);
		            	this.$message.success(data.data||"添加成功");
		            } 
		        }) 
		    },
		    editData(){
		    	this.dialogForm.imagUrl=this.qiniuImage.image_uri.join(",")
		        agentHttp.putJson('adminApi/admin/carousel/put_validated',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData', null);
		            	this.$message.success(data.data||"修改成功");
		            } 
		        }) 
		    },
		    selectData(){
		    	//console.log('取消下方注释，修改请求地址')
		        agentHttp.get('adminApi/admin/carousel/select_carousel/'+this.dialogSendData.id).then((data)=>{	
		            if(data.success){  
		            	this.dialogForm=data.data;
		            	this.qiniuImage.image_uri=data.data.imagUrl.split(',').notempty()//去掉为空的项，不然导致图片张数控制不准
		            } 
		        }) 
		    },

		}
	}
</script>

